<template>
  <div>

    <div style="height: 70px; width: 100%; background-color: #52c7c6; ">

      <div style="height: 70px; width: 200px; display: inline-block;">
        <br />
        <h3>&nbsp;&nbsp;&nbsp;收入概况:</h3>
        <br />

      </div>


      <div style="height: 70px; width: 200px;  display: inline-block;">

        &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<span style="color: #ffff;">{{ sizeAll }}</span>


        <p style="color: #ffff;">—————</p>

        &nbsp;<span style="color: #ffff;">总销售数量</span>

      </div>

      <div style="height: 70px; width: 200px;  display: inline-block;">

        &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<span style="color: #ffff;">{{ numAll }}</span>



        <p style="color: #ffff;">—————</p>

        &nbsp;&nbsp;<span style="color: #ffff;">总销售额</span>

      </div>


    </div>

    <div style="height: 30px; color: #ffff;"></div>

    <el-input v-model="drugName" placeholder="请输入药品名称" style="width: 230px;"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="drugQuery">搜索</el-button>

    <div style="height: 30px; color: #ffff;"></div>
    <el-table :data="tableData" stripe style="width: 100%  ; height: 290px;">
      <el-table-column prop="dzmHisMedicines.medicinesClass" label="药品分类">
      </el-table-column>
      <el-table-column prop="goodsName" label="药品名称">
      </el-table-column>
      <el-table-column prop="dzmHisMedicines.unit" label="单位">
      </el-table-column>
      <el-table-column prop="num" label="数量">
      </el-table-column>
      <el-table-column prop="amount" label="总价">
      </el-table-column>
      <el-table-column prop="dzmHisMedicines.createTime" label="进货时间" :formatter="dateForma">
      </el-table-column>
    </el-table>



    <el-pagination background layout="prev, pager, next" :total=pages @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>

import { drugInfo } from '../../api/incomeAndExpenses/DrugRequest'


import { drugQueryInfo } from '../../api/incomeAndExpenses/DrugRequest'


import { statistics } from '../../api/incomeAndExpenses/DrugRequest'



import moment from "moment"; //导入文件





export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {
      tableData: [],

      //分页页数
      pages: 0,


      //药品名称  
      drugName: '',

      //药品销售总额
      numAll: 0,

      //药品销售总数量
      sizeAll: 0,

    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

    this.drugInfo(1);

    statistics().then(rep => {

      rep.data.forEach(element => {


        this.numAll = this.numAll + element.amount

        this.sizeAll = this.sizeAll + element.num


      });


      console.log(rep.data)



    })

  },
  methods: {


    drugInfo(pageSize) {

      drugInfo(pageSize).then(rep => {


        console.log(rep.data)

        this.pages = rep.data.pages * 10

        this.tableData = rep.data.list


      })

    },




    //时间格式化转换7
    dateForma: function (row, column, data) {
      return moment.unix(data).format("YYYY-MM-DD ");
    },


    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);

      this.drugInfo(val);


    },


    drugQuery() {

      drugQueryInfo(this.drugName).then(rep => {


        this.tableData = rep.data.list

        console.log(rep.data)

        this.pages = rep.data.pages * 10


      })

      console.log(this.drugName)

    }

  }
};
</script>
<style lang='' scoped>
</style>